<template>
	<div>
		<el-main>
			<el-row :gutter="30" style="border: 1px solid black;width: 90%;margin: 0 auto;">
				<div style="display: flex;width: 100%;">
					<el-button style="background-color: #f56c6c;color: white;">请输入查询内容</el-button>
					<el-input placeholder="请输入内容" style="width: 90%;"></el-input>
					<el-button type="primary" icon="el-icon-search"></el-button>
				</div>
			</el-row>
			<div style="border: 1px solid black;width: 85% !important;margin: 10px auto 0;">
				<el-carousel indicator-position="outside">
				    <el-carousel-item v-for="item in list" :key="item">
				     <img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" style="width: 100%;height: 28vw;display: block !important;" />
				    </el-carousel-item>
				  </el-carousel>
			</div>
		</el-main>
		<el-footer style="width: 100%;margin: 0 auto;">
			<div class="wu">
				<h4>好评最高的5本书</h4>
				<ul>
					<li v-for="item in imgURL" :key="item.id">
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`"/>
						<span style="display: block;">{{item.name}}</span>
						<p>
							￥{{item.price}}
							<el-button type="danger">购买</el-button>
						</p>
					</li>
				</ul>
			</div>
			<div class="wu">
				<h4>好评最高的5本书</h4>
				<ul>
					<li v-for="item in imgURL" :key="item.id">
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`"/>
						<span style="display: block;">{{item.name}}</span>
						<p>
							￥{{item.price}}
							<el-button type="danger">购买</el-button>
						</p>
					</li>
				</ul>
			</div>
			<div class="wu">
				<h4>好评最高的5本书</h4>
				<ul>
					<li v-for="item in imgURL" :key="item.id">
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`"/>
						<span style="display: block;">{{item.name}}</span>
						<p>
							￥{{item.price}}
							<el-button type="danger">购买</el-button>
						</p>
					</li>
				</ul>
			</div>
		</el-footer>
	</div>
</template>

<script>

export default{
	name:'Main',
	data(){
		return{
			list:[],
			imgURL:[],
			imgURLS:[],
			imgURLSS:[],
		}
	},
	created(){
		this.axios.get('/api/public/book/findRate5').then( (res)=>{
			this.imgURL = res.data.data
			console.log(this.imgURL);
		} ).catch( (error)=>{
			console.log(error);
		} )
		// 
		this.axios.get('/api/public/book/findSale5').then( (res)=>{
			this.imgURLS = res.data.data
			console.log(this.imgURLS);
		} ).catch( (error)=>{
			console.log(error);
		} )
		// 
		this.axios.get('/api/public/book/findFav5').then( (res)=>{
			this.imgURLSS = res.data.data
			console.log(this.imgURLSS);
		} ).catch( (error)=>{
			console.log(error);
		} )
		this.axios.get('/api/public/findHot/5/1').then( (res)=>{
			this.list = res.data.data;
			console.log(this.list);
		} ).catch( (error)=>{
			console.log(error);
		} )
	}
}
</script>

<style scoped>
*{
	margin: 0;
	padding: 0;
}
.wu{
	height: 400px;
}
h4{
	border-bottom: 2px solid #ff4500;
	margin: -5px auto 0;
	width: 88%;
	line-height: 50px;
	color: #c71585;
}
ul{
	list-style: none;
	width: 80%;
	margin: 20px auto 0;
	text-align: center;
}
ul li{
	width: 20%;
	height: 300px;
	float: left;
}
ul li img{
	height: 200px;
}
/* 幻灯片 */
.el-carousel__item{
	
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
